<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>骰子</title>
        <style>
            * {
                margin: 0;
                height: 0;
                box-sizing: border-box;
            }

            body, html {
                height: 100%;
                background: black;
            }

            body {
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            div {
                width: 100px;
                height: 100px;
                padding: 10px;
                background: #bbbbbe;
                display: flex;
                border-radius:5px;
                box-shadow:0 -3px 3px 3px #F5F7FB;
            }
            span {
                width: 20px;
                height: 20px;
                background: black;
                border-radius: 50%;
                display: block;
            }
            div{
                display: flex;
                justify-content: space-between;
            }
            div:nth-of-type(1){
                justify-content: center;
                align-items: center;
            }
            div span:nth-of-type(2){
                align-self: flex-end;
            }
            div:nth-of-type(3) span:nth-of-type(2){
                align-self: center;
            }

            div:nth-of-type(3) span:nth-of-type(3){
                align-self: flex-end;
            }
            p{
                width: 20px;
                height: 80px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            div:nth-of-type(5) p:nth-of-type(2){
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div>
            <span></span>
        </div>
        <div>
            <span></span>
            <span></span>
        </div>
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div>
            <p>
                <span></span>
                <span></span>
            </p>
            <p>
                <span></span>
                <span></span>
            </p>
        </div>
        <div>
            <p>
                <span></span>
                <span></span>
            </p>
            <p>
                <span></span>
            </p>
            <p>
                <span></span>
                <span></span>
            </p>
        </div>
        <div>
            <p>
                <span></span>
                <span></span>
                <span></span>
            </p>
            <p>
                <span></span>
                <span></span>
                <span></span>
            </p>
        </div>
    </body>
</html>